<template>
  <div class="el-select COMBINATION_INPUT" @click="$event => $emit('click', $event)">
    <div class="el-select__tags" style="width: 100%" ref="container">
      <span>
        <el-tag
          :size="size"
          type="info"
          :key="item.vaue"
          v-for="item in items"
          closable
          :disable-transitions="false"
          @close="clickItem(value)"
        >
          {{ item.label }}
        </el-tag>
      </span>
    </div>
    <el-input ref="ElementInput"></el-input>
    <div style="width: 0px; height: 0.1px; overflow: hidden;position: absolute; top:50%;">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "CombinationInput",
  props: {
    items: {
      type: Array,
      required: true,
    },
    size: {
      type: String,
      default: () => "small",
    },
  },
  data() {
    return {
      originInputHeight: null,
      inputWidth: null,
    };
  },
  mounted() {
    let erd = elementResizeDetectorMaker();
    const el = this.$refs.container;
    erd.listenTo(el, this.containerSizeChanged);
    this.originInputHeight = this.$refs.ElementInput.$el.offsetHeight;
    this.inputWidth = el.offsetWidth;
  },
  methods: {
    clickItem() {},
    containerSizeChanged(element) {
      // const elements = [this.$refs.ElementInput];

      let height;
      if (element.offsetHeight > this.originInputHeight) {
        height = `${element.offsetHeight + 4}px`;
      } else {
        height = `${this.originInputHeight}px`;
      }
      this.$refs.ElementInput.$refs.input.style.height = height;
      // console.log(this.$refs);
      // elements.forEach((el) => {
      //   if (el.updatePopper) {
      //     el.updatePopper();
      //   }
      //   el.$refs.input.style.height = height;
      // });
      // const pop = this.$refs.DropDownPoppover;
      // pop.updatePopper();
    },
  },
};
</script>

<style scoped>
</style>